<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .form-container {
            width: 300px;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
    </style>
</head>
<body>

    <div class="form-container">
        <h1>Login</h1>
        <form id="loginForm">
            <label for="username">Username:</label>
            <input type="text" id="username" name="username"><br><br>

            <label for="password">Password:</label>
            <input type="password" id="password" name="password"><br><br>

            <input type="submit" value="Login">
        </form>
    </div>

</body>
</html>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    var url = window.location.href;
    console.log(url);
    var protocol = window.location.protocol;
    var hostname = window.location.hostname;
    var port = window.location.port;
    console.log(protocol + '//' + hostname + ':' + port);
    var preUrl = protocol + '//' + hostname + ':' + port;
    var baseUrl = preUrl+"/boot/"
    $(document).ready(function() {
        $("#loginForm").submit(function(event) {
            event.preventDefault(); // 阻止表单默认提交行为

            // 获取用户名和密码
            var username = $("#username").val();
            var password = $("#password").val();

            // 构建 JSON 对象
            var data = {
                "username": username,
                "password": password
            };

            // 发送 AJAX POST 请求
            $.ajax({
                url: baseUrl+"/user/login",
                type: "POST",
                contentType: "application/json",
                data: JSON.stringify(data),
                success: function(response) {
                    // 处理成功响应
                    alert(response);
                    // 进行其他操作
                },
                error: function(xhr, status, error) {
                    // 处理错误响应
                    console.log(xhr.responseText);
                    // 进行其他操作
                }
            });
        });
    });
</script>
